﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>天地图显示</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery,bootstrap" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <!--引入当前页面样式表-->
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style type='text/css'>
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .dropdown {
            position: absolute;
            right: 20px;
            top: 10px;
            z-index: 1000;
        }

        .dropdown-menu {
            min-width: 95px;
        }
    </style>
    <script>
        //使用严格模式
        "use strict";
        var map;
        var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";
        /** 地图初始化
         */
        function init() {
            //实例化要加载的source来源对象（全球矢量图）
            var vecsrc = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
                    "http://t" + Math.round(Math.random() * 7) + ".tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
                    + "&tk=" + tiandituKey
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化要加载的source来源对象（全球矢量中文注记）
            var cvasrc = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求天地图提供的全球矢量中文注记WMTS服务
                    "http://t" + Math.round(Math.random() * 7) + ".tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
                    + "&tk=" + tiandituKey
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化要加载的source来源对象（全球影像图）
            var imgsrc = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求天地图提供的全球影像图WMTS服务
                    "http://t" + Math.round(Math.random() * 7) + ".tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
                    + "&tk=" + tiandituKey
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化要加载的source来源对象（全球影像中文注记）
            var ciasrc = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求天地图提供的全球影像中文注记WMTS服务
                    "http://t" + Math.round(Math.random() * 7) + ".tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
                    + "&tk=" + tiandituKey
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化要加载的source来源对象（全球地形渲染图）
            var tersrc = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求天地图提供的全球地形渲染图WMTS服务
                    "http://t" + Math.round(Math.random() * 7) + ".tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILECOL=" + '{x}' + "&TILEROW=" + '{y}' + "&TILEMATRIX=" + '{z}'
                    + "&tk=" + tiandituKey
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化Map对象加载地图
            map = new mapboxgl.Map({
                //地图容器div的id
                container: 'map', // container id
                style: {
                    //设置版本号，一定要设置
                    "version": 8,
                    //添加来源
                    "sources": {
                        "vecsrc": vecsrc,
                        "cvasrc": cvasrc,
                        "imgsrc": imgsrc,
                        "ciasrc": ciasrc,
                        "tersrc": tersrc
                    },
                    //设置加载并显示来源的图层信息
                    "layers": [
                        {
                            //图层id，要保证唯一性
                            "id": "vecsrc",
                            //图层类型
                            "type": "raster",
                            //连接图层来源
                            "source": "vecsrc",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 22
                        },
                        {
                            //图层id，要保证唯一性
                            "id": "cvasrc",
                            //图层类型
                            "type": "raster",
                            //连接图层来源
                            "source": "cvasrc",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 22
                        }
                    ]
                }
            });
            //注册鼠标移动事件
            map.on('mousemove', function (e) {
                //经纬度坐标转web墨卡托
                const earthRad = 6378137.0;
                const x = e.lngLat.lng * Math.PI / 180 * earthRad;
                const a = e.lngLat.lat * Math.PI / 180;
                const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
                document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
            });
        }
        /** 图层切换
         */
        function changeLayer(src) {
            //获取地图的所有图层
            var Layers = map.getStyle().layers;
            var layerL = Layers.length;
            for (var i = 0; i < layerL; i++) {
                //移除图层
                map.removeLayer(Layers[i].id);
            }
            switch (src){
                default:
                    document.querySelector("#dropdownMenu1").innerHTML='street&nbsp<span class="caret"></span>';
                    break;
                case 'imgsrc':
                    document.querySelector("#dropdownMenu1").innerHTML='raster&nbsp<span class="caret"></span>';
                    break;
                case 'tersrc':
                    document.querySelector("#dropdownMenu1").innerHTML='terrain&nbsp<span class="caret"></span>';
                    break;
            }
            //添加图层
            map.addLayer({
                "id": src,
                "type": "raster",
                "source": src,
                "minzoom": 0,
                "maxzoom": 22
            });
            if (src == "vecsrc") {
                map.addLayer(
                    {
                        "id": "cvasrc",
                        "type": "raster",
                        //连接图层来源
                        "source": "cvasrc",
                        "minzoom": 0,
                        "maxzoom": 22
                    });
            }
            else {
                map.addLayer(
                    {
                        "id": "ciasrc",
                        "type": "raster",
                        //连接图层来源
                        "source": "ciasrc",
                        "minzoom": 0,
                        "maxzoom": 22
                    });
            }
        }
    </script>
</head>

<body onload="init()">
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
            切换图层
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('vecsrc')">street</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('imgsrc')">raster</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('tersrc')">terrian</a>
            </li>
        </ul>
    </div>
    <div id='map'>
        <div id="mouse-position">
        </div>
    </div>
</body>

</html>